<!doctype html>
<html lang="zh-CN" th:replace="admin-layout :: layout(~{::title}, ~{::link}, ~{::script}, ~{::body}, 'classify-list')"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${data}?'修改分类':_">添加分类</title>
    <link rel="stylesheet" th:href="@{/common/zTree/css/demo.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/common/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/common/zTree/js/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript" th:src="@{/common/zTree/js/jquery.ztree.excheck.min.js}"></script>
    <script>
        $("#submitBtn").click(function () {
            var name = $("input[name='name']").val();
            if (!name) {
                msgAlert("请输入分类名称")
                return;
            }
            ajaxJson("/admin/classify/ajax/save", $("#form").serialize(), function (res) {
                if (res.status) {
                    location.href = "/admin/classify/tree/list";
                }
            })
        })

        var setting = {
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: "00000000"
                }
            },
            callback: {
                onClick: onClick
            }
        };

        $(document).ready(function () {
            ajaxJson("/admin/classify/ajax/all", {}, function (res) {
                if (res.status) {
                    $.fn.zTree.init($("#treeDemo"), setting, res.data);
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    var newNode = {id: "00000000", name: "一级分类"};
                    treeObj.addNodes(null, 0, newNode);
                }
            })
        });

        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes();
            var parentId = $("#parentId");
            var parentName = $("#parentName");
            parentId.val(nodes[0].id);
            parentName.val(nodes[0].name);
            //隐藏菜单
            hideMenu();
        }

        function showMenu() {
            var cityOffset = $("#parentName").offset();
            $("#menuContent").css({left: cityOffset.left + "px", top: ($("#parent").height()+1) + "px"}).slideDown("fast");

            $(document).bind("mousedown", onBodyDown);
        }

        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

        $("#parentName").click(function () {
            showMenu()
        })
    </script>
</head>
<body>
<form class="form-horizontal" id="form">
    <input type="hidden" name="id" th:if="${data}" th:value="${data.id}">
    <input type="hidden" name="dataType" th:if="${data}" th:value="${dataType}">
    <input type="hidden" name="parentId" th:value="${data}?${data.parentId}" id="parentId">
    <div class="form-group" id="parent">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>父级分类</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <input type="text" class="form-control" placeholder="父级分类" readonly id="parentName"
                   th:value="${data}?(${data.parentName}?${data.parentName}:'一级分类')">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>分类名称</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <input type="text" class="form-control" id="name" placeholder="分类名称" name="name"
                   th:value="${data}?${data.name}">
        </div>
    </div>
    <div class="form-group" th:if="${data}==null">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>分类类型</label>
        <div class="col-sm-8 col-md-8 col-lg-6">
            <select name="dataType" class="form-control">
                <option value="0" th:selected="${data}?${data.dataType}==0">试题</option>
            </select>
        </div>
    </div>
    <div class="form-group" th:if="${data}!=null">
        <label class="col-sm-2 col-md-2 col-lg-3 control-label"><span class="text-danger">*&nbsp;</span>分类类型</label>
        <div class="col-sm-8 col-md-8 col-lg-6" th:switch="${data.dataType}">
            <p class="form-control-static" th:case="0">试题</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-md-offset-2 col-lg-offset-3 col-sm-8 col-md-8 col-lg-6">
            <button type="button" class="btn btn-primary" id="submitBtn">提交</button>
            <button type="button" class="btn btn-warning backBtn">返回</button>
        </div>
    </div>
</form>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0;"></ul>
</div>
</body>
</html>